<template>
    <div class="header">
        <div class="top">
            <div class="left">
                <i class="el-icon-location-outline"></i><span>解放8号</span>
            </div>
            <div class="right">
                <i class="iconfont icon-saoyisao"></i>
                <i class="iconfont icon-erweima"></i>
                <i class="el-icon-chat-dot-round"></i>
            </div>
        </div>
        <div class="search">
            <div class="inp">
                <i class="el-icon-search"></i>
                <input type="text" placeholder="盒马电子卡">
                <span class="sear">搜索</span>
            </div>
        </div>
        <div class="banner">
            <img src="../../assets/home.png" alt="" width="100%">
        </div>
        <div class="list">
            <div class="top">
                <div>
                    <img src="../../assets/list1.png" alt="">
                    <span>时令水果</span>
                </div>
                <div>
                    <img src="../../assets/list2.png" alt="">
                    <span>新鲜蔬菜</span>
                </div>
                <div>
                    <img src="../../assets/list3.png" alt="">
                    <span>海鲜水产</span>
                </div>
                <div>
                    <img src="../../assets/list4.png" alt="">
                    <span>肉禽食品</span>
                </div>
                <div>
                    <img src="../../assets/list5.png" alt="">
                    <span>食品干货</span>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <img src="../../assets/list6.png" alt="">
                    <span>美妆个护</span>
                </div>
                <div>
                    <img src="../../assets/list7.png" alt="">
                    <span>母婴包货</span>
                </div>
                <div>
                    <img src="../../assets/list8.png" alt="">
                    <span>保健滋补</span>
                </div>
                <div>
                    <img src="../../assets/list9.png" alt="">
                    <span>中外名酒</span>
                </div>
                <div>
                    <img src="../../assets/list10.png" alt="">
                    <span>彩妆时尚</span>
                </div>
            </div>
        </div>
        <div class="notice" style="width:100%">
            <img src="../../assets/notice.png" alt="" width="100%">
        </div>
        <div class="food">
            <img src="../../assets/szdj.png" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.header{
    width: 100%;
    height: 300px;
    background-color: #F5A44B;
}
.top{
    display: flex;
    justify-content: space-between;
}
span{
    font-size:30px;
    color:white;
}
.el-icon-location-outline,.el-icon-chat-dot-round{
    font-size:30px;
    color:white;
}
i{
    padding: 10px;
}
.search{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.inp{
    background-color: white;
    border-radius: 30px;
    width: 90%;
    display: flex;
    height: 60px;
}
.search input{
    height: 100%;
    width: 75%;
    border-radius: 30px;
    border: 0;
    padding-left: 20px;
    text-align: left;
    font-size: 30px;
    outline: none;
}
.el-icon-search{
    color: #6C6C6C;
    margin-left: 20px;
}
.sear{
    display: inline-block;
    background-color: #F4A753;
    border-radius: 30px;
    text-align: center;
    color: white;
    font-size: 30px;
    width:100px;
    padding: 10px 10px;
    cursor: pointer;
}
.banner{
    width: 100%;
    height: 300px;
    cursor: pointer;
    margin-bottom: 70px;
}
.list{
    margin: auto;
    width: 93%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 3px gray;
    padding: 20px;
    span{
        color: #939393;
        font-weight: bold;
        font-size: 20px;
        text-align: center;
    }
    .bottom{
        display: flex;
    }
}
.food{
    width: 100%;
    height: 400px;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>